<template>
  <div>
    <span style="font-size: 20px;">绑卡页面</span>
<!--    加粗-->
    <el-divider />
    <span style="font-size: 18px">注意：1. 绑定银行卡时，填写银行卡预留<span style="color: red">姓名</span>，再绑定银行卡，否则无法绑定银行卡。</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-size: 18px">2. 绑定银行卡时，需要先绑定<span style="color: red">手机号</span>，输入验证码，再绑定银行卡，否则无法绑定银行卡。</span><br/>
    <span style="color: #409EFF">绑定银行卡</span> <el-icon :size="30" style="color: #409EFF;margin-top: 20px"><CreditCard /></el-icon>

    <div class="abc">
      <el-icon :size="100"  style="color: #409EFF;margin-left: 200px"><Money/></el-icon>
<!--      <el-button type="primary" plain style="margin-left: 100px;margin-bottom: 70px;width: 30%;height: 50px" @click="zou">立即绑卡</el-button>-->
      <el-button type="primary" plain style="margin-left: 100px;margin-bottom: 70px;width: 30%;height: 50px" @click="dialogVisible = true">立即绑卡</el-button>
    </div>

    <div>
      <el-dialog
          v-model="dialogVisible"
          title="绑卡页面"
          width="50%"
      >
        <span>

    <el-form :model="forms" label-width="auto" style="max-width: 400px">
      <el-form-item
          label="姓名"
          prop="realName"
          :rules="[
          { required: true, message: '请输入你的姓名', trigger: 'blur' },
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '请输入中文',
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="forms.realName" placeholder="请输入你的姓名：" />
      </el-form-item>
      <el-form-item
          label="银行卡号"
          prop="bankCard"
          :rules="[
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          {
            min: 18,
            max: 18,
            message: '请输入正确的银行卡号',
            trigger: 'blur',
          },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的银行卡号',
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="forms.bankCard" placeholder="请输入银行卡号：" />
      </el-form-item>
      <el-form-item
          label="手机号"
          prop="moblie"
          :rules="[
          { required: true, message: '请输入银行预留手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' },
          {
            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="forms.moblie" placeholder="请输入银行预留手机号：" />
      </el-form-item>
      <el-button
          type="primary"
          style="float: right"
          @click="subcode()"
          :disabled="text === '获取验证码' ? false : true"
      >
        {{ text }}
      </el-button>
      <el-form-item
          label="验证码"
          prop="code"
          :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
          style="width: 240px"
      >
        <el-input v-model="forms.code" placeholder="请输入验证码：" />
      </el-form-item>
      <el-form-item
          label="银行卡密码"
          prop="payPassword"
          :rules="[
          { required: true, message: '请输入银行卡密码', trigger: 'blur' },
        ]"
          style="width: 240px"
      >
        <el-input
            show-password
            v-model="forms.payPassword"
            placeholder="请输入银行卡密码："
        />
      </el-form-item>
<!--      <el-button type="success" style="margin-left: 10px" @click="adds()">-->
<!--        绑定-->
<!--      </el-button>-->
    </el-form>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="adds()">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
// import router from "@/router";
import {GetCode, PostAdds} from "@/api/banding";

const dialogVisible = ref(false)

const forms = ref({})

const text = ref('获取验证码')

const subcode = async () => {
  if (forms.value.moblie === undefined || forms.value.moblie === '') {
    ElMessage.error('请输入手机号')
  } else {
    let n = 60
    text.value = n + '秒钟重新获取'
    GetCode(forms.value.moblie).then(res => {
      if (res.code === 200) {
        ElMessage.success('验证码发送成功')
      }
    })
    const timer = setInterval(() => {
      if (n === 0) {
        clearInterval(timer)
        text.value = '获取验证码'
      } else {
        n--
        text.value = n + '秒钟重新获取'
      }
    }, 1000)
  }
}

function adds() {
  PostAdds(forms.value).then(res => {
    if (res.code === 200) {
      ElMessage.success('绑定成功')
      window.location.href = '/'
    } else {
      ElMessage.error('绑定失败')
    }
  })
}

// function zou() {
//   // alert("跳转到绑卡页面")
//   // 跳转到绑卡页面
//   router.push('/bandingcard')
// }

// const handleClose = () => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//       .then(() => {
//         done()
//       })
//       .catch(() => {
//         // catch error
//       })
// }
</script>

<style scoped lang="scss">


.abc{
  width: 70%;
  height: 60%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px #409EFF;
  padding: 150px;
  margin: 20px auto;
}
</style>
